import BaseComponent from "http://component.119safe.cn/component/base.js";

new class Side_Menu_Item extends BaseComponent
{
	/*
	 * link		点击时跳转的链接
	 * icon		font-awesome图标
	 * sub		子菜单
	 * tip		角标提醒
	 */
	Properties = { "link": "", "icon": "", "sub": null, "tip": null };

	InnerContainer = "span.menu-text";

	render() { super.render(this.constructor.name); }

	preRender()
	{
		if(this.Properties.sub?.length > 0)
		{
			this.Properties.sub = `<ul class="submenu">${eval(this.Properties.sub)}</ul>`;
			this.Properties.toggle = "dropdown-toggle";
			this.Properties.down = '<b class="arrow fa fa-angle-down"></b>';
		}
		else
			this.Properties.sub = this.Properties.toggle = this.Properties.down = "";

		if(this.Properties.tip?.length > 0)
			this.Properties.tip = `<div title="${this.Properties.tip}" style="position:absolute;right:0px;top:0px;width:10px;height:10px;border-radius:50%;background-color:red"></div>`;
		else
			this.Properties.tip = "";
	}

	Content = `
<li>
	<a href="{link}" class="{toggle}">
		<i class="menu-icon fa {icon}"></i>
		<span class="menu-text"></span>
		{down}
		{tip}
	</a>
	{sub}
</li>
`;
}().render();
